<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Adapt.js - HTML Class Test</title>
<style>

* {
  font-family: sans-serif;
  line-height: 1.5;
}

.range_test {
  /* Default */
  display: none;
  font-weight: bold;
}

html.range_0 #p_0 {
  /* Style overrides for: 0px to 760px */
  display: block;
}

html.range_1 #p_1 {
  /* Style overrides for: 760px to 980px */
  display: block;
}

html.range_2 #p_2 {
  /* Style overrides for: 980px to 1280px */
  display: block;
}

html.range_3 #p_3 {
  /* Style overrides for: 1280px to 1600px */
  display: block;
}

html.range_4 #p_4 {
  /* Style overrides for: 1600px to 1920px */
  display: block;
}

html.range_5 #p_5 {
  /* Style overrides for: above 1920px */
  display: block;
}
</style>
<script>
// Called by Adapt.js
function myCallback(i, width) {
  // Alias HTML tag.
  var html = document.documentElement;

  // Find all instances of range_NUMBER and kill 'em.
  html.className = html.className.replace(/(\s+)?range_\d/g, '');

  // Check for valid range.
  if (i > -1) {
    // Add class="range_NUMBER"
    html.className += ' range_' + i;
  }

  // Note: Not making use of width here, but I'm sure
  // you could think of an interesting way to use it.
}

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0 to 760',
    '760 to 980',
    '980 to 1280',
    '1280 to 1600',
    '1600 to 1920',
    '1920'
  ]
};
</script>
<script src="assets/js/adapt.min.js"></script>
</head>
<body>
<p>
  This page demonstrates how a callback function can be<br />
  used with Adapt.js to change the class of the HTML tag.
</p>
<p class="range_test" id="p_0">
  Visible at: 0px to 760px
</p>
<p class="range_test" id="p_1">
  Visible at: 760px to 980px
</p>
<p class="range_test" id="p_2">
  Visible at: 980px to 1280px
</p>
<p class="range_test" id="p_3">
  Visible at: 1280px to 1600px
</p>
<p class="range_test" id="p_4">
  Visible at: 1600px to 1920px
</p>
<p class="range_test" id="p_5">
  Visible at: above 1920px
</p>
</body>
</html>